<template>
    <fieldset>
        <legend>飞翔音乐</legend>
        <button @click="handal(item)" v-for="item in buttons" :key="item" :class="['tab-button',{active:item===select}]">{{item}}</button>
        <div class="tab" :is="dynamic">123</div>
    </fieldset>
</template>

<script>
import homepage from "./homepage.vue"
import musiccollection from "./musiccollection.vue"
import myinformation from "./myinformation.vue"
export default{
    data () {
        return {
            buttons:['homepage','musiccollection','myinformation'],
            select:""
        }
    }, 
   components: {
    "homepage":homepage,
    "myinformation":myinformation,
    "musiccollection":musiccollection
   },
   methods: {
    handal(item){
        this.select = item
    }
   },
   computed: {
    dynamic(){
        return this.select
    }
   }
}
</script>

<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: blue;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>